import React, { PureComponent } from 'react'
import { Card, Button, Icon } from 'antd';

const ButtonGroup = Button.Group;

export default class buttons extends PureComponent {
  state = {
    loading: false,
    iconLoading: false,
  };

  enterLoading = () => {
    this.setState({ loading: true });
  };

  enterIconLoading = () => {
    this.setState({ iconLoading: true });
  };
  render () {
    return (
      <div>
        <Card title="基础按钮">
          <Button type="primary">Primary</Button>
          <Button>Default</Button>
          <Button type="dashed">Dashed</Button>
          <Button type="danger">Danger</Button>
          <Button type="link">Link</Button>
        </Card>
        <Card title="图形按钮">
          <Button type="primary" shape="circle" icon="search" />
          <Button type="primary" shape="circle">  A</Button>
          <Button type="primary" icon="search">Search </Button>
          <Button shape="circle" icon="search" />
          <Button icon="search">Search</Button>
        </Card>
        <Card title="Lading">
          <Button type="primary" loading>
            Loading
        </Button>
          <Button type="primary" size="small" loading>
            Loading
        </Button>
          <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
            Click me!
        </Button>
          <Button
            type="primary"
            icon="poweroff"
            loading={this.state.iconLoading}
            onClick={this.enterIconLoading}
          >
            Click me!
        </Button>
        </Card>
        <Card title="按钮组">
          <ButtonGroup>
            <Button type="primary">
              <Icon type="left" />
              Go back
      </Button>
            <Button type="primary">
              Go forward
        <Icon type="right" />
            </Button>
          </ButtonGroup>
          <ButtonGroup>
            <Button type="primary" icon="cloud" />
            <Button type="primary" icon="cloud-download" />
          </ButtonGroup>
          <ButtonGroup>
            <Button type="primary" size="small" icon="cloud" />
            <Button type="primary" size="small" icon="cloud-download" />
          </ButtonGroup>
        </Card>
      </div>
    )
  }
}
